<template>
  <div>
    <button @click='flag=!flag'>按钮</button>
    <keep-alive :include="/child/">
      <mychild v-if='flag'></mychild>
      <mychild2 v-else />
    </keep-alive>
    {{qqq}}

    <h1
      v-color='"red"'
      v-pression='4'
    >hello </h1>
    <plugin></plugin>
  </div>
</template>
<script>
// @ is an alias to /src
//  子父组件的钩子函数的执行顺序  创造是先父后子  完成时先子后父
/* 
  渲染顺序：先父后子，完成顺序：先子后父

更新顺序：父更新导致子更新，子更新完成后父

销毁顺序：先父后子，完成顺序：先子后父

父 beforeCreate  created  beforeMount   子 beforeCreate  created  beforeMount  mounted 父 mounted

*/
import mychild2 from "./components/child2";
import mychild from "./components/child";
export default {
  name: "XXX",
  data() {
    return {
      flag: true,
    };
  },
  components: {
    mychild2,
    mychild,
  },
};
</script>
<style lang="less">
</style>